<template>
  <!-- <div :class="['cheader',isRoll?'roll':'']"> -->
  <div class="cheader">
    <div :class="['nav',isRoll?'roll':'']">
      <img src="@/common/img/logo.png" alt="" class="logo" @click="goIndex">
      <ul @click="navContentOn">
        <li class="t"></li>
        <li class="c"></li>
        <li class="b"></li>
      </ul>
    </div>
    <div class="navContentWrap" v-if="navContentShow">
      <div class="navContent">
        <font-awesome-icon :icon="['far', 'times-circle']" class="icon" @click="navContentOff"/>
        <div class="t">
          <ul>
            <li :class="[pageIndex==3?'active':'']">
              <router-link to="/project4">
                <h3>一线战疫专题</h3>
              </router-link>
            </li>
            <li :class="[pageIndex==2?'active':'']">
              <router-link to="/project3">
                <h3>科研战疫专题</h3>
              </router-link>
            </li>
            <li :class="[pageIndex==1?'active':'']">
              <router-link to="/project2">
                <h3>全球交大人战疫专题</h3>
              </router-link>
            </li>
            <li :class="[pageIndex==0?'active':'']">
              <router-link to="/project1">
                <h3>文化战疫专题</h3>
              </router-link>
            </li>
          </ul>
        </div>
        <div class="b">
          <ul>
            <li>
              <h3>JACCOUNT: sdfsdfsfaf</h3>
            </li>
            <li>
              <font-awesome-icon icon="sign-out-alt" class="icon"/>
              <h3>登出</h3>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- <div class="content">
      <img src='@/common/img/logo.png' alt="" @click="goIndex">
      <ul>
        <li :class="[pageIndex==0?'active':'']">
          <router-link to="/project1">
            <h4>文化战疫专题</h4>
            <span></span>
          </router-link>
        </li>
        <li :class="[pageIndex==1?'active':'']">
          <router-link to="/project2">
            <h4>全球交大人战疫专题</h4>
            <span></span>
          </router-link>
        </li>
        <li :class="[pageIndex==2?'active':'']">
          <router-link to="/project3">
            <h4>科研战疫专题</h4>
            <span></span>
          </router-link>
        </li>
        <li :class="[pageIndex==3?'active':'']">
          <router-link to="/project4">
            <h4>一线战疫专题</h4>
            <span></span>
          </router-link>
        </li>
      </ul>
    </div> -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      isRoll: false,
      navContentShow: false,
      static: {
        // logo
        logoPng: '/static/img/common/logo.png'
      }
    }
  },
  watch: {
    navContentShow (res) {
      if (res === true) {
        document.body.classList.add('noscroll')
      } else {
        document.body.classList.remove('noscroll')
      }
    }
  },
  mounted () {
    document.body.classList.remove('noscroll')
    this.rollfun()
    window.addEventListener('scroll', this.rollfun)
  },
  props: {
    pageIndex: ''
  },
  methods: {
    rollfun () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 100) {
        this.isRoll = true
      } else {
        this.isRoll = false
      }
    },
    goIndex () {
      this.$router.push({
        name: 'index'
      }).catch((e) => console.log(''))
    },
    navContentOn () {
      this.navContentShow = true
    },
    navContentOff () {
      this.navContentShow = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .cheader {
    // background: #ccc;
    // height: 69px;
    // line-height: 118px;
    // position: fixed;
    // z-index: 999;
    // width: 100%;
    // border-bottom: 1px solid #ddd;
    // transition: all .1s;
    &.roll {
      background-color: rgba($color: #005083, $alpha: .8);
      border: 0 none;
      .content {
        ul {
          li {
            h4 {
              color: #fff;
            }
            span {
              background-color: #fff;
            }
          }
        }
      }
    }
    .nav {
      width: 100%;
      height: 65px;
      line-height: 65px;
      // background-color: red;
      display: flex;
      justify-content: space-between;
      position: fixed;
      z-index: 999;
      transition: all .3s;
      &.roll {
        background-color: rgba($color: #005083, $alpha: .8);
      }
      .logo {
        width: 107px;
        height: 31px;
        display: inline-block;
        margin-left: 22px;
        margin-top: 17px;
        vertical-align: 10px;
      }
      ul {
        margin-top: 22px;
        margin-right: 27px;
        text-align: right;
        li {
          display: block;
          height: 3px;
          background-color: #fff;
          border-radius: 20px;
          margin-bottom: 4px;
        }
        .t {
          width: 18px;
          margin-left: 2px;
        }
        .c {
          width: 15px;
          margin-left: 5px;
        }
        .b {
          width: 20px;
        }
      }
    }
    .navContentWrap {
      position: fixed;
      z-index: 1000;
      background-color: rgba($color: #000000, $alpha: .7);
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      .navContent {
        box-sizing: border-box;
        padding: 20px 0;
        width: 100%;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        // height: 400px;
        background-color: rgba($color: #005083, $alpha: .9);
        &>.icon {
          position: absolute;
          top: 16px;
          right: 22px;
          font-size: 24px;
          color: #fff;
          padding: 2px;
        }
        .t {
          padding-bottom: 10px;
          ul {
            li {
              height: 40px;
              line-height: 40px;
              // background-color: green;
              text-align: center;
              &.active {
                h3 {
                  color: #6ad0ff;
                }
              }
              h3 {
                color: #fff;
                font-size: 14px;
                display: inline-block;
              }
            }
          }
        }
        .b {
          display: none;
          border-top: 1px dashed #639bbc ;
          padding-top: 10px;
          ul {
            li {
              height: 40px;
              line-height: 40px;
              // background-color: green;
              text-align: center;
              h3 {
                color: #fff;
                font-size: 14px;
                display: inline-block;
              }
              .icon {
                color: #fff;
              }
            }
          }
        }
      }
    }
    .content {
      width: 1100px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      display: none;
      img {
        display: inline-block;
        vertical-align: top;
        width: 202px;
        height: 59px;
        margin-top: 32px;
        cursor: pointer;
        // margin-left: 47px;
      }
      ul {
        li {
          display: inline-block;
          margin-right: 50px;
          line-height: 28px;
          font-size: 16px;
          &.active {
            h4 {
              font-weight: bolder;
            }
            span {
              opacity: 1;
            }
          }
          span {
            display: block;
            margin: 6px auto 0;
            width: 30px;
            height: 4px;
            background-color: #ffe75f;
            opacity: 0;
          }
          a {
            color: #fefefe;
          }
        }
      }
    }
  }
</style>
